<template>
<q-layout view="hHh Lpr fFf">
    <!-- Be sure to play with the Layout demo on docs -->

    <!-- (Optional) The Header -->
    <q-header :class="isShow?'back-dark shadow-7':'transparent'">
        <q-toolbar class="transparent " style="width: 100%; height: 50px">
            <q-btn @click="handleBack" flat round icon="mdi-keyboard-backspace"></q-btn>
            <!-- <q-img v-if="isShow" src="icons/一方映画logo200708竖版亮色.png" :width="$q.platform.is.mobile ? '150px' : '200px'" contain /> -->
            <q-space></q-space>

            <q-tabs dense shrink stretch v-model="tab" class="text-grey   full-height" active-color="primary" indicator-color="primary" inline-label align="justify" narrow-indicator @input="handleTabChange">
                <q-tab name="library" label="特效库" icon="mdi-motion-outline" />
                <q-tab name="collection" label="项目" icon="mdi-shape-rectangle-plus" />
                <q-tab name="like" label="喜欢" icon="mdi-heart-outline" />
            </q-tabs>

            <q-space></q-space>

            <q-btn flat dense :class="isShow?'':'shadow-7'" icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />
            <!-- <q-bar dark style="height: 60px" class="transparent">

                  <q-space />

                  <q-btn flat dense  @click="handleMinWin" :class="isShow?'':'shadow-7'" icon="mdi-minus" class="items-center">

                      <q-tooltip>窗口还原(Esc)</q-tooltip>
                  </q-btn>
                  <q-btn flat dense :class="isShow?'':'shadow-7'"  icon="crop_square" @click="handleMaxWin">
                      <q-tooltip>窗口最大化</q-tooltip>
                  </q-btn>
                  <q-btn flat dense :class="isShow?'':'shadow-7'"  icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />

              </q-bar> -->
            <!-- <q-btn flat round dense icon="menu" class="mobile-only q-mr-sm" /> -->
        </q-toolbar>
    </q-header>
    <q-drawer v-model="leftDrawer" :overlay="!$platform.inDesktop()" :width="300" :breakpoint="100" side="left" class="shadow-7" content-class="bg-dark " :behavior="!$platform.inDesktop()?'mobile':'default'">
        <!-- QScrollArea is optional -->
        <q-scroll-area style="height: calc(100% - 80px); margin-top: 80px" :thumb-style="{
          right: '4px',
          borderRadius: '5px',
          backgroundColor: '#009688',
          width: '5px',
          opacity: 0.75,
        }" :bar-style="{
          right: '2px',
          borderRadius: '9px',
          backgroundColor: '#03a9f4',
          width: '9px',
          opacity: 0.2,
        }" class="q-px-md ">

            <q-tree v-if="tab=='library'" :nodes="typeList" dark ref="typeTree" node-key="et_id" label-key="name" selected-color="primary" :selected.sync="selected" tickStrategy="leaf" :ticked.sync="ticked" :default-expand-all="true" @update:ticked="handleTypeSelect" />
            <div v-if="tab=='like'">
                <likefolder-tree ref="likeFolderTree" @update="handleLoadEffectLikeFolderList" @curFolder="handleCurFolder"></likefolder-tree>
            </div>
            <div v-if="tab=='collection'">
                <collectionfolder-tree ref="collectionFolderTree" @update="handleLoadEffectCollectionFolderList" @curFolder="handleCurCollectionFolder"></collectionfolder-tree>
            </div>

        </q-scroll-area>
        <q-card flat class="absolute-top transparent q-py-sm q-px-md q-mt-md" style="height: 80px">
            <div class="bg-transparent row justify-between">
                <div v-if="tab=='library'" class="text-weight-bold text-h6">
                    类型
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>
                <div v-if="tab=='collection'" class="text-weight-bold text-h6">
                    项目收藏
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>
                <div v-if="tab=='like'" class="text-weight-bold text-h6">
                    我的喜欢
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>

            </div>
            <q-separator color="grey-7" class="q-my-md"></q-separator>

        </q-card>

    </q-drawer>

    <q-page-container class="bg-grey-10">

        <!-- This is where pages get injected -->
        <router-view ref="EffectListContainer" :typeList="typeList" :tickedType="tickedType" @removeTicked="handleRemoveTicked" :curTab="tab" :curLikePath="curLikeFolderPath" @likeSelect="handleLikeSelect" @collectionSelect="handleCollectionSelect" :curCollectionPath="curCollectionFolderPath" />
    </q-page-container>

</q-layout>
</template>

<script>
import {
    loadEffectType,

} from "assets/api/studio/effect"
export default {
    name: 'EffectLayout',
    components: {
        LikefolderTree: () => import('components/studio/effect/LikefolderTree.vue'),
        CollectionfolderTree: () => import('components/studio/effect/CollectionfolderTree.vue')
    },
    props: {
        user: {
            type: Object
        }
    },
    data() {
        return {
            leftDrawer: false,
            pid: '',
            isFull: false,
            isShow: true,
            typeList: [],
            selected: [],
            ticked: [],
            tickedType: [],
            curType: 'all',
            isLibrary: true,

            isSearch: false,
            tab: 'library',
            curCollectionFolder: 'all',

            curLikeFolder: {
                elf_id: 0,
                name: '全部',
            },
            curLikeFolderPath: [{
                elf_id: 0,
                name: '全部',
            }],
            curCollectionFolder: {
                ecf_id: 0,
                name: '全部'
            },
            curCollectionFolderPath: [{
                ecf_id: 0,
                name: '效果制作',
            }],

        }
    },
    created() {
        if (this.$platform.inDesktop()) {
            this.leftDrawer = true;
        };
        this.pid = this.$route.params.pid;

        this.projectInfo = this.$store.state.projectinfo;

        this.i_name = setInterval(() => {
          this.projectInfo = this.$store.state.projectinfo;
            if (this.projectInfo.name) {
                document.title = this.projectInfo.name + '--特效库';
                clearInterval(this.i_name)
            }

        }, 500);
        // console.log(projectInfo);
    },
    mounted() {
        this.handleLoadEffectType()
        this.$emit('isSingle', true)
    },
    watch: {
        '$q.fullscreen.isActive'(val) {
            // if (val) {
            //     this.isShow = false;
            // } else {
            //     this.isShow = true;
            // }

            console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
        }
    },
    beforeDestroy() {
        this.$emit('isSingle', false)
        this.$q.loading.hide()
    },
    methods: {

        handleTabChange(val) {
            console.log('tabchange', val);
            this.tab = val
            if (val == 'collection') {

            }
            if (val == "library") {

            }
            if (val == "like") {

            }
        },
        //collecttion项目收藏部分
        handleCollectionSelect(id) {
            this.$refs.likeFolderTree.handleCollectionSelect(id)
        },
        handleCurCollectionFolder(curLikeFolder, curLikeFolderPath) {
            this.curCollectionFolder = curLikeFolder;
            this.curCollectionFolderPath = curLikeFolderPath;
        },
        handleLoadEffectCollectionFolderList(ecf_id) {
            this.$refs.EffectListContainer.handleLoadCollectionListById(ecf_id)
        },

        //Like部分我的喜欢
        handleLikeSelect(id) {
            this.$refs.likeFolderTree.handleLikeSelect(id)
        },
        handleCurFolder(curLikeFolder, curLikeFolderPath) {
            this.curLikeFolder = curLikeFolder;
            this.curLikeFolderPath = curLikeFolderPath;
        },
        handleLoadEffectLikeFolderList(elf_id) {
            this.$refs.EffectListContainer.handleLoadLikeListById(elf_id)
        },

        //library 部分 特效库
        handleTypeSelect(type, item) {
            let ticked = this.ticked;
            let typeTree = this.$refs.typeTree
            let arr = []
            ticked.forEach(i => {
                let obj = typeTree.getNodeByKey(i)
                arr.push(obj)
            })

            console.log(arr);
            this.tickedType = arr
            if (this.ticked.length > 0) {
                console.log('load ticked', this.ticked);

                this.$refs.EffectListContainer.handleLoadEffectByType(this.ticked);
            } else {
                this.$refs.EffectListContainer.handleLoadEffectByType(0);
            }

        },
        handleRemoveTicked(et_id) {
            console.log('remove', et_id);
            let type = this.$refs.typeTree
            let arr = []
            arr.push(et_id)
            type.setTicked(arr, false)
        },
        handleLoadEffectType() {
            loadEffectType().then(res => {
                console.log(res, '音乐类型');
                if (res.data.code == 1) {
                    // this.typeList = res.data.data
                    let data = res.data.data;

                    function getTrees(data) {

                        data.forEach((v, i, arr) => {
                            // v：儿子

                            arr.forEach((v1, y) => {
                                if (v1.name == "风格") {
                                    v1.icon = "mdi-palette-swatch-outline"
                                }
                                if (v1.name == "分类") {
                                    v1.icon = "mdi-shape-outline"
                                }
                                if (v1.name == "用途") {
                                    v1.icon = "mdi-flag-outline"
                                }
                                // v1：父亲
                                // v1.tickable = false;
                                v1.selectable = false;
                                if (v1.et_id == v.parent_id) {
                                    // 父亲找到儿子了，就添加到children
                                    if (!v1.children) v1.children = []
                                    v1.children.push(v)
                                }
                            })
                        })
                        return data
                    }
                    let typeData = getTrees(data).filter((v) => v.parent_id == 0)
                    console.log(typeData);

                    this.typeList = [{
                        et_id: 0,
                        name: '全部',
                        children: typeData,
                        icon: 'widgets',
                        selectable: false
                    }]
                    setTimeout(() => {
                        this.$refs.typeTree.expandAll()
                    }, 200)

                }
            })
        },

        handleBack() {
            this.$router.replace('/studio/' + this.pid)
        },

    }
}
</script>
